<!--
 * @Date: 2023-02-09 13:23:29
 * @LastEditTime: 2023-03-10 18:45:48
 * @FilePath: /hash-guess-game/src/views/club/components/navigationMenu.vue
 * 介绍:
-->
<script lang="ts" setup>
import CardGlass from "@@/components/CardGlass/CardGlass.vue";
import { _require } from "@@/utils/tools/tools";
import { t } from "@@/hooks/useI18n";
const { t: $t } = useI18n();
const router = useRouter();
const navigationMenuConfig = [
  {
    title: t("sai-ji-gui-ze"),
    src: _require("src/assets/iconSvg/gui-ze.svg"),
    onClick: () => router.push({ name: "gameRule" }),
  },
  {
    title: t("ju-le-bu-chen-yuan"),
    src: _require("src/assets/iconSvg/cheng-yuan.svg"),
    onClick: () => router.push({ name: "clubMember" }),
  },
  {
    title: t("ge-ren-sai-biao"),
    src: _require("src/assets/iconSvg/bao-biao.svg"),
    onClick: () => router.push({ name: "meGameList" }),
  },
  {
    title: t("ju-le-bu-qin-dan"),
    src: _require("src/assets/iconSvg/qing-dan.svg"),
    onClick: () => router.push({ name: "clubInventory" }),
  },
  {
    title: t("fen-hon-lie-biao"),
    src: _require("src/assets/iconSvg/lie-biao.svg"),
    onClick: () => router.push({ name: "bonusList" }),
  },
  {
    title: t("hash-sai-chi"),
    src: _require("src/assets/iconSvg/hash-sai-chi.svg"),
    onClick: () => router.push({ name: "hashRaceCourse" }),
  },
];
</script>

<template>
  <div class="navigationMenu">
    <CardGlass
      @click="item.onClick"
      v-for="item in navigationMenuConfig"
      class="active"
    >
      <div class="CardContent auto-mt">
        <Mimage height="50rem" :src="item.src"></Mimage>
        <div class="CardContent_title">{{ $t(item.title) }}</div>
      </div>
    </CardGlass>
  </div>
</template>

<style lang="less" scoped>
.navigationMenu {
  margin-top: 105rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: center;
  align-items: center;
  gap: var(--gap-md);
  grid-auto-rows: 1fr;
  .CardContent_title {
    text-align: center;
  }
}

.CardContent {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: calc((100vw - var(--gap-md) * 8) / 3);
}
</style>
